<template>
	<div class="front_index_user">
		<div class="intro">
			<img :src="userInfo.avatar" alt="" />
			<ul>
				<li>姓名：{{ userInfo.nickname }}</li>
				<li>部门名称：{{ userInfo.deptName }}</li>
				<li>工号：{{ userInfo.phone }}</li>
			</ul>
		</div>
		<div class="button">
			<a class="userCenter" @click="handleGotoUserCenter">个人中心</a>
			<a class="userHome" href="https://grzy.cug.edu.cn/" target="_blank">个人主页</a>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router';
import { useUserStore } from '@/stores';
const userStore = useUserStore();

const router = useRouter();

const userInfo = computed(() => {
	let user = userStore.userInfo;
	return { ...user, avatar: user.avatar };
});

const handleGotoUserCenter = () => {
	router.push('/user/profile');
};
</script>

<style lang="scss" scoped>
.front_index_user {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 100%;
	height: 100%;
	border-radius: 8px;
	box-sizing: border-box;
	background-color: #fff;
	border: solid 5px rgb(var(--primary-3));
	.intro {
		display: flex;
		align-items: center;
		flex: 1;
		overflow: hidden;
		position: relative;
		&::before {
			position: absolute;
			top: -10px;
			left: 108px;
			content: '';
			height: 120%;
			transform: rotate(10deg);
			border-left: solid 5px rgb(var(--primary-3));
		}
		img {
			width: 80px;
			height: 90px;
			margin: 10px;
			object-fit: cover;
		}
		ul {
			flex: 1;
			line-height: 2em;
			overflow: hidden;
			margin-left: 40px;
		}
	}
	.button {
		display: flex;
		flex-shrink: 0;
		align-items: center;
		justify-content: space-around;
		border-top: solid 5px rgb(var(--primary-3));
		padding: 12px 24px;
		a {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 144px;
			height: 48px;
			font-size: 16px;
			line-height: 48px;
			border-radius: 4px;
			background-repeat: no-repeat;
			background-position: center;
			background-size: 100% auto;
			&.userCenter {
				color: #006db8;
				background-image: url('@/assets/images/userCenter_bg.png');
				&:before {
					background-image: url('@/assets/images/userCenter.png');
				}
			}
			&.userHome {
				color: #ec9100;
				background-image: url('@/assets/images/userHome_bg.png');
				&:before {
					background-image: url('@/assets/images/userHome.png');
				}
			}
			&::before {
				width: 24px;
				height: 24px;
				content: '';
				flex-shrink: 0;
				margin-right: 10px;
				background-repeat: no-repeat;
				background-position: center;
				background-size: 100% auto;
			}
			&:hover {
				opacity: 0.8;
			}
		}
	}
}
</style>
